<template>
  <section class="right-skills">
    <!-- 技能信息通过 https://skillicons.dev/icons?i=ai,babel,bootstrap,css,docker,electron,express,flutter,git,github,gitlab,html,idea,jest,jquery,less,sass,md,mongodb,mysql,nextjs,nginx,nodejs,npm,pnpm,pinia,postman,react,redux,sqlite,sublime,ts,vscode,vite,vue,webpack&perline=8生成, perline参数控制一行几列图标-->
    <img class="icon-pc" :src="skillIconsPc" alt="skills" />

    <img class="icon-mobile" :src="skillIconsMobile" alt="skills" />
  </section>
</template>

<script setup lang="ts">
import skillIconsPc from '@/assets/images/skill-icons-pc.svg';
import skillIconsMobile from '@/assets/images/skill-icons-mobile.svg';
</script>

<style lang="scss" scoped>
.right-skills {
  padding: 0 20px 20px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .icon-pc,
  .icon-mobile {
    max-width: 100%;
    height: auto; // 确保图片高度自适应
  }

  .icon-pc {
    display: block;
  }

  .icon-mobile {
    display: none;
  }
}
</style>
